{% block sw_promotion_v2_settings_discount_type %}
<div class="sw-promotion-v2-settings-discount-type">
    <sw-container
        columns="1fr 1fr"
        gap="20px"
    >

        {% block sw_promotion_v2_settings_discount_type_type %}
        <mt-select
            v-model="discount.type"
            class="sw-promotion-v2-settings-discount-type__field-select-discount-type"
            :label="$tc('sw-promotion-v2.detail.discounts.settings.discountType.labelDiscountType')"
            :disabled="!acl.can('promotion.editor')"
            :options="discountTypeOptions"
        />
        {% endblock %}

        {% block sw_promotion_v2_settings_discount_type_price %}
        <mt-number-field
            v-model="discount.value"
            class="sw-promotion-v2-settings-discount-type__field-price"
            :id-suffix="discount.id"
            :min="0"
            :max="discount.type === 'percentage' ? 100 : null"
            :label="labelValue"
            :disabled="discount.type === 'free' || !acl.can('promotion.editor')"
        >

            {% block sw_promotion_v2_settings_discount_type_price_suffix %}
            <template #suffix>
                <span v-if="isPercentageType">%</span>
                <span v-else>{{ currencySymbol }}</span>
            </template>
            {% endblock %}

        </mt-number-field>
        {% endblock %}

    </sw-container>

    <sw-container
        columns="1fr 1fr"
        gap="20px"
    >

        {% block sw_promotion_v2_settings_discount_type_apply_discount_to %}
        <mt-select
            v-model="discount.applierKey"
            class="sw-promotion-v2-settings-discount-type__field-apply-discount-to"
            :label="$tc('sw-promotion-v2.detail.discounts.settings.discountType.labelApplyDiscountTo')"
            :disabled="discount.type === 'free' || !acl.can('promotion.editor')"
            :options="applierOptions"
        />
        {% endblock %}

        {% block sw_promotion_v2_settings_discount_type_max_discount_value %}
        <mt-number-field
            v-model="discount.maxValue"
            class="sw-promotion-v2-settings-discount-type__field-max-discount"
            :id-suffix="discount.id"
            :label="$tc('sw-promotion-v2.detail.discounts.settings.discountType.labelMaxDiscountValue')"
            :disabled="discount.type !== 'percentage' || !acl.can('promotion.editor')"
            allow-empty
            @update:model-value="onMaxValueChanged"
        >

            {% block sw_promotion_v2_settings_discount_type_max_discount_value_suffix %}
            <template #suffix>
                <span>{{ currencySymbol }}</span>
            </template>
            {% endblock %}

        </mt-number-field>
        {% endblock %}

    </sw-container>

    {% block sw_promotion_v2_settings_discount_type_advanced_prices_link %}
    <a
        v-if="showAdvancedPricesLink"
        class="sw-promotion-v2-settings-discount-type__advanced-prices"
        role="button"
        tabindex="0"
        @click="onClickAdvancedPrices"
        @keydown.enter="onClickAdvancedPrices"
    >
        {{ $tc('sw-promotion-v2.detail.discounts.pricesModal.linkAdvancedPrices') }}
        <mt-icon
            name="regular-long-arrow-right"
            size="16px"
        />
    </a>
    {% endblock %}

    {% block sw_promotion_v2_settings_discount_type_advanced_prices_modal %}
    <sw-modal
        v-if="displayAdvancedPricesModal"
        :title="$tc('sw-promotion-v2.detail.discounts.pricesModal.advancedPricesHeader')"
        class="sw-promotion-v2-settings-discounts-type__advanced-prices-modal"
        @modal-close="onCloseAdvancedPricesModal"
    >

        {% block sw_promotion_v2_settings_discount_type_advanced_prices_modal_grid %}
        <sw-one-to-many-grid
            :collection="discount.promotionDiscountPrices"
            :local-mode="true"
            :columns="currencyPriceColumns"
            :show-selection="false"
            :show-actions="!acl.can('promotion.editor')"
        >

            {% block sw_promotion_v2_settings_discount_type_advanced_prices_modal_grid_column_name %}
            <template #column-currency.translated.name="{ item }">
                <p class="sw-promotion-v2-settings-discounts-type__advances-prices-column-name">
                    {{ item.currency.translated.name }}
                </p>
            </template>
            {% endblock %}

            {% block sw_promotion_v2_settings_discount_type_advanced_prices_modal_grid_column_price %}
            <template #column-price="{ item }">
                <mt-number-field
                    v-model="item.price"
                    class="sw-promotion-v2-settings-discounts-type__advanced-prices-column-price"
                    type="text"
                    size="small"
                    :disabled="!acl.can('promotion.editor')"
                >

                    {% block sw_promotion_v2_settings_discount_type_advanced_prices_modal_grid_column_price_suffix %}
                    <template #suffix>
                        {{ item.currency.symbol }}
                    </template>
                    {% endblock %}

                </mt-number-field>
            </template>
            {% endblock %}

        </sw-one-to-many-grid>
        {% endblock %}

        {% block sw_promotion_v2_settings_discount_type_advanced_prices_modal_footer %}
        <template #modal-footer>

            {% block sw_promotion_v2_settings_discount_type_advanced_prices_modal_footer_button_close %}
            <mt-button
                variant="primary"
                size="small"
                @click="onCloseAdvancedPricesModal"
            >
                {{ $tc('sw-promotion-v2.detail.discounts.pricesModal.closeModal') }}
            </mt-button>
            {% endblock %}

        </template>
        {% endblock %}

    </sw-modal>
    {% endblock %}

</div>
{% endblock %}
